<template>
	<view class="container">
		<u-navbar title-size="34" :isBack="false" :back-icon="false" :border-bottom="false" placeholder>
			<view class="slot-wrap">
				<view class="d-flex align-items-center justify-content-center title-tab">
					<u-tabs :list="titleList" :bar-style="titleBarStyle" :active-item-style="activeStyle"
						:gutter="gutter" :bold="true" active-color="#292940" :fontSize="34" inactive-color="#333447"
						bar-width="25" height="88" v-model="titleCurrent" @change="titleChange"></u-tabs>
				</view>
			</view>
		</u-navbar>
		<view v-show="titleCurrent == 0">
			<template v-if="titleCurrent == 0">
				<u-tabs :list="categoryList" :bar-style="barStyle" :active-item-style="activeStyle" :gutter="gutter"
					:bold="true" active-color="#292940" inactive-color="#292940" bar-width="24" height="92"
					v-model="current" @change="change" bar-height="8"></u-tabs>
				<view class="screen">
					<view class="w-100 d-flex justify-content-between">
						<view class="screen-left mr-3" @tap="inteSort">
							<text class="text-00D7FF">{{selectList[auctionIndex].name}}</text>
							<view class="triangle-icon">
								<image src="/static/market/or-down.png" v-if="!showSort"></image> 
								<image src="/static/market/or-up.png" v-if="showSort"></image>
							</view>
						</view>
						<view class="d-flex justify-content-end align-items-center">
							<view class="sort-img-box">
								<image class="sort-img" v-show="isBig" src="/static/market/one.png" mode="aspectFill"
									@tap="changeView"></image>
								<image class="sort-img" v-show="!isBig" src="/static/market/two.png" mode="aspectFill"
									@tap="changeView"></image>
							</view>
							<view class="filter-line"></view>
							<view class="d-flex justify-content-end align-items-center" @click="popShow = true,showSort = false">
								<view class="text-666773 fz-28">筛选</view>
								<view class="filter-icon">
									<image src="/static/market/filter-def-big.png" v-if="keyword === ''"></image>
									<image src="/static/market/filter-sel-big.png" v-else></image>
								</view>
							</view>
						</view>
					</view>
					<view class="scr-main" :class="{'show-sort':showSort}">
						<view class="d-flex justify-content-between sort-item align-items-center"
							v-for="(item,index) in selectList" @click="auctionClick(index)">
							<view class="text-343A40 fz-28" :class="{'text-00D7FF':auctionIndex == index}">{{item.name}}
							</view>
							<view v-if="auctionIndex == index">
								<u-icon name="checkmark" color="#00D7FF" size="32"></u-icon>
							</view>
						</view>
					</view>
				</view>	
			</template>
		</view>
		<view v-show="titleCurrent == 1" class="bilnd-tabs-box position-relative">
			<template v-if="titleCurrent == 1">
				<u-tabs :list="BlindList" :bar-style="barStyle" :active-item-style="activeStyle" :gutter="gutter"
					:bold="true" active-color="#292940" inactive-color="#292940" bar-width="24" height="92"
					v-model="currentBlind" bar-height="8"></u-tabs>
				<image class="sort-img" v-show="isBig" src="/static/market/sort-1.png" mode="aspectFill"
					@click="changeView"></image>
				<image class="sort-img" v-show="!isBig" src="/static/market/sort-2.png" mode="aspectFill"
					@click="changeView"></image>
			</template>
		</view>
		<view v-show="titleCurrent == 0">
			<scroll-view scroll-y class="scroll-box" :style="{'--percent':navHeight + 'px'}" 
			refresher-background="#F8F9FA" :refresher-enabled="true" @refresherrefresh="onMarketRefresh"
			@refresherpulling="onMarketPull" @refresherrestore="onMarketReset" :refresher-triggered="MarketRefresh"
			@scrolltolower="MarketBottom">
				<view class="padding-wrap creation-box d-flex justify-content-between pt-0">
					<view class="creation-item" :class="{'isBigView':isBig}" v-for="item in list" @tap="toDetail(item)">
						<view class="position-relative">
							<view class="creation-cover">
								<image :src="item.cover" mode="aspectFill" v-if="item.type != 1"></image>
								<image :src="item.file" mode="aspectFill" v-else></image>
							</view>
							<view class="position-absolute creation-quantity">
								<view class="d-flex justify-content-center align-items-center">
									<span class="text-CCCDD5 item-title" style="margin-right: 6upx;">发行:</span>
									<span class="text-00D7FF item-count font-DIN">{{tui.filterCount(item.count)}}</span>
									<span class="line"></span>
									<span class="text-CCCDD5 item-title" style="margin-right: 6upx;">流通:</span>
									<span class="text-00D7FF item-count font-DIN">{{tui.filterCount(item.sell_user_works_count)}}</span>
								</view>
							</view>
						</view>
						<view class="creation-item-title creation-item-padding line-h-1em text-292940 item-name">
							{{item.name}}</view>
						<view class="text-292940 creation-item-padding creation-item-price d-flex align-items-baseline">
							<span class="font-DIN item-name">￥</span>
							<span class="font-DIN item-price">{{item.min_price}}</span>
							<span class="pl-1 text-999ba8 fz-28">起</span>
						</view>
					</view>
				</view>
				<view class="loadmore-style">
					<u-loadmore :status="status" v-show="moreShow" margin-top="50" />
				</view>
				<view class="no-works" v-show="total === 0 && !moreShow">
					<image src="../../static/market/no-works.png" mode="aspectFill"></image>
					<view style="color: #b5b5b5;">空空如也~</view>
				</view>
			</scroll-view>
		</view>
		<view v-show="titleCurrent == 1">
			<scroll-view scroll-y class="scroll-box-box" :style="{'--percent':navHeight + 'px'}"
			refresher-background="#F8F9FA" :refresher-enabled="true" @refresherrefresh="onBoxRefresh"
			@refresherpulling="onBoxPull" @refresherrestore="onBoxReset" :refresher-triggered="BoxRefresh"
			@scrolltolower="BoxBottom">
				<view class="padding-wrap creation-box d-flex justify-content-between">
					<view class="creation-item" :class="{'isBigView':isBig}" v-for="item in boxList" @tap="toBlind(item)">
						<view class="position-relative">
							<view class="creation-cover">
								<image :src="item.cover_url" mode="aspectFill"></image>
							</view>
							<view class="position-absolute creation-quantity">
								<view class="d-flex justify-content-center align-items-center">
									<span class="text-CCCDD5 item-title" style="margin-right: 6upx;">剩余:</span>
									<span class="text-00D7FF item-count font-DIN">{{tui.filterCount(tui.accSub(item.all_count,item.sell_count))}}</span>
									<span class="line"></span>
									<span class="text-CCCDD5 item-title" style="margin-right: 6upx;">流通:</span>
									<span class="text-00D7FF item-count font-DIN">{{tui.filterCount(item.sell_count)}}</span>
								</view>
							</view>
						</view>
						<view class="creation-item-title creation-item-padding line-h-1em text-292940 item-name">
							{{item.name}}</view>
						<view class="text-292940 creation-item-padding creation-item-price d-flex align-items-baseline">
							<span class="font-DIN item-name">￥</span>
							<span class="font-DIN item-price">{{item.min_price}}</span>
							<span class="pl-1 text-999ba8 fz-28">起</span>
						</view>
					</view>
				</view>
				<view class="loadmore-style">
					<u-loadmore :status="boxStatus" v-show="boxMoreShow" margin-top="50" />
				</view>
				<view class="no-works" v-show="boxTotal === 0 && !boxMoreShow">
					<image src="../../static/market/no-works.png" mode="aspectFill"></image>
					<view style="color: #b5b5b5;">空空如也~</view>
				</view>
			</scroll-view>
		</view>
		
		<view :style="{'--percent':navHeight + 'px'}" :class="{'shadow-show':showSort}"  @click="closeMask"  class="shadow"></view>
		<u-popup v-model="popShow" mode="center" border-radius="16" closeable @close="popClose">
			<view class="popup-scr-main">
				<u-search class="mt-4" height="70" clearabled placeholder="搜索作品" :show-action="false" v-model="keyword">
				</u-search>
				<view class="ipt-box"></view>
				<view class="ipt-box">
					<u-button type="button" throttle-time="0" class="ipt-btn" @tap="reSet">重置</u-button>
					<u-button type="button" class="ipt-btn search" @tap="popShow = false">搜索
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				barStyle: {
					background: 'linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%)',
					borderRadius: '3px',
				},
				activeStyle: {
					fontWeight: 600,
					fontSize: '34upx',
				},
				popShow: false,
				moreShow: false,
				status: 'loading',
				total: '',
				page: 1,
				list: [],
				keyword: '',
				searchKeyword: '',
				gutter: 38,
				category_id: '',
				isBig: false,
				titleList:[
					{name:'数字藏品'},{name:'盲盒'}
				],
				titleCurrent:0,
				titleBarStyle:{
					background: 'linear-gradient(135deg,rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%)'
				},
				BlindList:[
					{name:'全部'}
				],
				currentBlind:0,
				boxMoreShow: false,
				boxStatus: 'loading',
				boxPage: 1,
				boxTotal: 0,
				boxList: [],
				MarketRefresh: false,
				BoxRefresh: false,
				sort:0,
				showSort:false,
				auctionIndex:0,
				selectList:[
					{name:'最受欢迎',sort:1},{name:'价格从高到低',sort:2},{name:'价格低从到高',sort:3}
				],
				sortSelect:false
			}
		},
		onLoad() {
			this.navHeight = this.tui.navBarHeight + 44
			if(!this.isRefreshMarket){
				this.getMarket()
				this.getBox()
			}
		},
		onShow() {
			this.isBig = uni.getStorageSync('isBig') || false
			if(this.isRefreshMarket){
				//处理跳转
				setTimeout(()=>{
					if(this.marketCurrent == 0){
						this.titleCurrent = 0
					}else{
						this.titleCurrent = 1
					}
				},100)
				this.auctionIndex = 0
				this.sort = 0
				this.keyword = ''
				this.searchKeyword = ''
				this.category_id = ''
				this.current = 0
				this.getMarket(1)
				this.getBox(1)
				this.$store.commit('works/SET_ISREFRESHMARKET', false)
			}
		},
		computed: {
			USER() {
				return this.$store.state.auth.USER
			},
			//类型列表
			categoryList() {
				let arr = this.$store.state.works.categoryList
				arr.unshift({
					id: '',
					name: '推荐'
				})
				return arr
			},
			//是否刷新市场列表
			isRefreshMarket(){
				return this.$store.state.works.isRefreshMarket
			},
			//切换下标
			marketCurrent(){
				return this.$store.state.works.marketCurrent
			}
		},
		methods: {
			//自定义下拉刷新控件被下拉
			onMarketPull() {
				this.MarketRefresh = 'restore'
			},
			//自定义下拉刷新被触发
			onMarketRefresh() {
				this.getMarket(1)
			},
			//自定义下拉刷新被复位
			onMarketReset() {
				this.MarketRefresh = 'restore';
			},
			//滚动到底部
			MarketBottom(){
				this.moreShow = false
				if (this.list.length < this.total) {
					this.page++
					this.getMarket()
				} else {
					this.status = 'nomore'
					this.moreShow = true
				}
			},
			//自定义下拉刷新控件被下拉
			onBoxPull() {
				this.BoxRefresh = 'restore'
			},
			//自定义下拉刷新被触发
			onBoxRefresh() {
				this.getBox(1)
			},
			//自定义下拉刷新被复位
			onBoxReset() {
				this.BoxRefresh = 'restore';
			},
			//滚动到底部
			BoxBottom(){
				this.boxMoreShow = false
				if (this.boxList.length < this.boxList) {
					this.boxPage++
					this.getBox()
				} else {
					this.boxStatus = 'nomore'
					this.boxMoreShow = true
				}
			},
			changeView() {
				this.isBig = !this.isBig
				uni.setStorageSync('isBig', this.isBig)
			},
			//获取市场列表
			getMarket(val) {
				if (val == 1) {
					this.page = 1
					this.list = []
					this.total = ''
				}
				this.moreShow = true
				this.status = 'loading'
				this.$store.dispatch('works/market', { category_id: this.category_id, page: this.page,name:this.keyword,sort:this.sort }).then(res => {
					this.searchKeyword = this.keyword
					this.MarketRefresh = false
					this.total = res.data.total
					if(this.page == 1){
						this.list = res.data.data
					}else{
						this.list = [...this.list, ...res.data.data]
					}
					if (this.total == this.list.length && this.list.length >= 4) {
						this.status = 'nomore'
					} else {
						this.moreShow = false
					}
				}).catch(error => {
					this.MarketRefresh = false
					this.moreShow = false
				})
			},
			//获取盲盒列表
			getBox(val) {
				if (val == 1) {
					this.boxPage = 1
					this.boxList = []
					this.boxTotal = ''
				}
				this.boxMoreShow = true
				this.boxStatus = 'loading'
				this.$store.dispatch('works/boxMarket', { page: this.boxPage}).then(res => {
					this.BoxRefresh = false
					this.boxTotal = res.data.total
					if(this.boxPage == 1){
						this.boxList = res.data.data
					}else{
						this.boxList = [...this.boxList, ...res.data.data]
					}
					if (this.boxTotal == this.boxList.length && this.boxList.length >= 4) {
						this.boxStatus = 'nomore'
					} else {
						this.boxMoreShow = false
					}
				}).catch(error => {
					this.BoxRefresh = false
					this.boxMoreShow = false
				})
			},
			goBack() {
				uni.switchTab({
					url: '/pages/tabBars/collection'
				})
			},
			//切换市场类型
			change(index) {
				this.current = index
				this.category_id = this.categoryList[this.current].id
				this.getMarket(1)
				if (this.current > 0) {
					this.gutter = 44
				} else {
					this.gutter = 40
				}
				this.showSort = false
			},
			//切换藏品与盲盒
			titleChange(index) {
				this.titleCurrent = index
				this.showSort = false
				this.$store.commit('works/SET_MARKETCURRENT',this.titleCurrent)
			},
			//关闭搜索图层，判断搜索关键字是否改变，如果改变则清空列表并请求接口
			popClose(val) {
				if ((this.keyword !== this.searchKeyword) || val == 1) {
					this.popShow = false
					this.getMarket(1)
				}
			},

			toCollection() {
				uni.navigateTo({
					url: '/pages/secondary/collection/index'
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/secondary/market/index?work_id=${item.id}`
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/index'
				})
			},
			toBlind(item) {
				uni.navigateTo({
					url: `/pages/secondary/market/Blind-box?box_id=${item.id}`
				})
			},
			//点击排序标题
			inteSort() {
				this.showSort = !this.showSort //排序是否展开
			},
			//拍卖排序
			auctionClick(index) {
				if (this.auctionIndex != index) {
					this.auctionIndex = index
					this.sort = this.selectList[this.auctionIndex].sort
					this.getMarket(1)
				}
				this.showSort = false
				this.sortSelect = true
			},
			//重置
			reSet() {
				this.keyword = ''
			},
			closeMask(){
				this.showSort = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: calc(100vh - 50px);
		background: #F8F9FB;
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.padding-wrap {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.slot-wrap {
		width: 100%;
	}
	
	.title-tab {
		width: 100%;
		/deep/.u-tab-item{
			font-size: 32upx;
		}
	}
	.search-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #ffffff;
		padding-bottom: 16upx;
		padding-top: 10upx;
	}

	.search-wrap {
		width: 90%;
	}
	.screen {
		width: 100%;
		height: 90upx;
		display: flex;
		align-items: center;
		padding: 0 30upx 0 30upx;
		box-sizing: border-box;
		justify-content: space-between;
		background-color: #F8F9FA;
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		
		.scr-main {
			width: 100%;
			height: 0upx;
			background-color: #F8F9FA;
			position: absolute;
			box-sizing: border-box;
			top: 90upx;
			left: 0;
			transition: 0.3s;
			padding: 0 30upx;
			overflow: hidden;
			border-radius: 0 0 16upx 16upx;
		
			.title {
				padding: 20upx 0 29upx 0;
			}
		
			.u-hairline-border[data-v-6e15e680]:after {
				border: none !important;
			}
			.sort-item {
				min-width: 150upx;
				line-height: 80upx;
				text-align: left;
				box-sizing: border-box;
				height: 80upx;
				border-bottom: 1upx solid rgba(222, 226, 230, 0.6);
				margin: 0 1% 0 1.4%;
			}
			.sort-item:nth-last-of-type(1){
				border-bottom: none;
			}
		}
		.show-sort {
			height: 240upx;
			transition: 0.3s;
		}
		
		}
	.sort-img-box{
		width: 30upx;
		height: 30upx;
		.sort-img {
			width: 30upx;
			height: 30upx;
			vertical-align: top;
		}
	}
		
	.sort-img {
		width: 36upx;
		height: 36upx;
	}
	.screen-left{
		height: 100%;
		display: flex;
		align-items: center;
		line-height: 108upx;
		box-sizing: border-box;
	
		text {
			color: #343A40;
			font-size: 26upx;
		}
	
		.triangle-icon {
			width: 30upx;
			height: 30upx;
			margin-left: 10upx;
			padding-top: 2upx;
	
			image {
				width: 30upx;
				height: 30upx;
				vertical-align: top;
			}
			.triangle-icon-style{
				transform: rotate(-180deg) !important;
			}
		}
	}
	.sort-icon {
		width: 48upx;
		height: 48upx;
		position: absolute;
		top: 50%;
		right: 22upx;
		transform: translateY(-50%);
	}
	

	
	.filter-line{
		width: 1upx;
		height: 32upx;
		background: #D8D9E1;
		margin:0 34upx;
	}
	.filter-icon {
		width: 28upx;
		height: 31upx;
		margin-left: 12upx;

		image {
			width: 28upx;
			height: 31upx;
		}
	}
	.bilnd-tabs-box{
		width: 100%;
		background: #ffffff;
		padding-right: 38upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.creation-box {
		flex-wrap: wrap;
		box-sizing: border-box;
		padding-top: 24upx;

		.creation-item {
			width: 337upx;
			background: #FFFFFF;
			box-shadow: 0px 4upx 30upx -12upx rgba(102, 105, 120, 0.2), 0px 4upx 12upx -6upx rgba(154, 166, 219, 0.1);
			border-radius: 10upx;
			margin-bottom: 24upx;

			.creation-cover {
				width: 337upx;
				height: 337upx;

				image {
					width: 337upx;
					height: 337upx;
					border-radius: 10upx 10upx 0 0;
				}
			}

			.creation-quantity {
				width: 248upx;
				height: 40upx;
				background: rgba(41, 41, 64, 0.65);
				border-radius: 24upx 24upx 0px 0px;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				backdrop-filter: blur(20px);
				padding: 6upx 0;
				box-sizing: border-box;

				.item-title {
					font-size: 22upx;
				}

				.item-count {
					font-size: 24upx;
				}

				.line {
					display: block;
					height: 20upx;
					width: 2upx;
					background: #999BA8;
					margin: 0 14upx;
				}
			}

			.item-name {
				font-size: 28upx;
			}

			.item-price {
				font-size: 40upx;
			}

			.item-qi {
				font-size: 28upx;
			}

			.creation-item-padding {
				padding: 0 12upx;
				box-sizing: border-box;
			}

			.creation-item-title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				// line-height: 83upx;
				padding-top: 31upx;
				padding-bottom: 14upx;
			}

			.creation-item-price {
				line-height: 44upx;
				margin-bottom: 20upx;
			}
		}

		.isBigView {
			width: 690upx;
			background: #FFFFFF;
			box-shadow: 0px 4upx 30upx -12upx rgba(102, 105, 120, 0.2), 0px 4upx 12upx -6upx rgba(154, 166, 219, 0.1);
			border-radius: 10upx;
			margin-bottom: 24upx;

			.creation-cover {
				width: 690upx;
				height: 690upx;

				image {
					width: 690upx;
					height: 690upx;
					border-radius: 10upx 10upx 0 0;
				}
			}

			.creation-quantity {
				width: 280upx;
				height: 48upx;
				background: rgba(41, 41, 64, 0.65);
				border-radius: 24upx 24upx 0px 0px;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				backdrop-filter: blur(20px);
				padding: 8upx 0;
				box-sizing: border-box;

				.item-title {
					font-size: 24upx;
				}

				.item-count {
					font-size: 28upx;
				}

				.item-name {
					font-size: 30upx;
				}

				.item-price {
					font-size: 48upx;
				}

				.line {
					display: block;
					height: 20upx;
					width: 2upx;
					background: #999BA8;
					margin: 0 14upx;
				}
			}

			.item-name {
				font-size: 30upx;
			}

			.item-price {
				font-size: 48upx;
			}

			.creation-item-padding {
				padding: 0 12upx;
				box-sizing: border-box;
			}

			.creation-item-title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				// line-height: 83upx;
				padding-top: 31upx;
				padding-bottom: 18upx;
			}

			.creation-item-price {
				line-height: 44upx;
				margin-bottom: 20upx;
			}
		}
	}

	.popup-scr-main {
		width: 690upx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		transition: 0.3s;
		padding: 40upx 30upx 30upx 30upx;
		overflow: hidden;
		border-radius: 0 0 16upx 16upx;

		.title {
			padding: 20upx 0 29upx 0;
		}

		.ipt-box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			margin-bottom: 50upx;

			button {
				width: 290upx;
				height: 80upx;
				background: #E9ECEF;
				border-radius: 8upx;
				font-size: 28upx;
				color: #7B809A;
				text-align: center;
				line-height: 80upx;
				border: none !important;
			}

			.search {
				background-color: #292940;
				color: #ffffff;
			}
		}
	}

	.text-999ba8 {
		color: #999ba8;
	}

	.no-works {
		margin: 50upx auto;
		text-align: center;

		image {
			width: 300upx;
			height: 300upx;
		}
	}

	.loadmore-style {
		padding-bottom: 30upx;
	}
	.scroll-box {
		//      高度计算 100vh -navbar动态高度 - 筛选高度 - tabs高度 - tabbar高度50px 
		/* #ifdef H5 */
		height: calc(100vh - var(--percent) - 90upx - 100upx - 50px) !important;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - var(--percent) - 90upx - 100upx) !important;
		/* #endif */
		overflow: hidden;
		box-sizing: border-box;
	}
	.scroll-box-box {
		//      高度计算 100vh -navbar动态高度 - 筛选高度 - tabs高度 - tabbar高度50px 
		/* #ifdef H5 */
		height: calc(100vh - var(--percent) - 100upx - 50px) !important;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - var(--percent) - 100upx) !important;
		/* #endif */
		overflow: hidden;
		box-sizing: border-box;
	}
	/deep/ .title-tab .u-tab-item{
		line-height: 120upx !important;
	}
	.shadow{
		position: fixed;
		/* #ifdef H5 */
		top: calc(44px + 90upx + 100upx);
		/* #endif */
		/* #ifdef APP-PLUS */
		top: calc(var(--percent) + 90upx + 100upx);
		/* #endif */
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		transition: -webkit-transform 0.3s;
		transition: transform 0.3s;
		transition: transform 0.3s, 
		-webkit-transform 0.3s;
		
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 1;
		transition: all 0.3s ease-in-out 0s;
		display: none;
		//transform: scale(1.2, 1.2);
		
	}
	.shadow-show{
		display: block;
		opacity: 1;
		transition: -webkit-transform 0.3s;
		transition: transform 0.3s;
		transition: transform 0.3s, 
		-webkit-transform 0.3s;
	}
</style>
